
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相亲详细</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        #app {
            height: 100%;
            width: 100%;
            /* max-width: 720px; */
            max-width: 480px;
            /* max-height: 1282px; */
            max-height: 860px;
            background-image: url("./imgs/beij2.png");
            /* background-size: cover; */
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .top {
            position: absolute;
            width: 88%;
            height: 77px;
            left: 50%;
            top: 4%;
            transform: translateX(-50%);
            justify-content: space-between;
        }

        .item img {
            position: relative;
            top: -5%;
            transform: scale(0.5);
        }

        .item .text {
            position: relative;
            bottom: 15%;
        }

        .box{
            background-color: #FFF;
            width: 98%;
            position: absolute;
            top: 25%;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
            overflow: auto;
        }

        .left2 {
            width: 150px;
            height: 150px;
        }

        .right{
            display: inline-block;
            vertical-align: top;
            padding-left: 20px;
        }

        .rightName{
            font-weight: 700;
            color: white;
        }

        .right span{
            font-size: 14px;
            padding: 4px 8px;
            background-color: #eef3ff;
            margin-right: 8px;
            border-radius: 4px;
            color: #5476dc;
        }

        .title{
            margin: 10px 10px;
            height: 30px;
            font-size: 16px;
            background-color: #F7F7F7;
        }

        .content{
            margin: 10px 10px;
            height: 30px;
            font-size: 16px;
        }

        .c {
            color: #848384;
            font-size: 14px;
            margin: 10px 10px;
        }

        .c2 {
            color: #848384;
            font-size: 14px;
            margin: 20px 30px;
        }

        .tb {
            width: 60px;
        }

        .tb2 {
            width: 22px;
            height: 22px;
        }

        .content2 {
            font-size: 20px;
            color: black;
        }

        .c3 {
            border: #f0f0f0;
            border-radius: 20px;
            border-style: solid;
            margin:10px;
            height: 170px;
            padding: 20px;
            color: #959595;
        }
        .c4 {
            margin-left: 30px;
            margin-top: 5px;
            padding: 5px;
            color: #959595;
        }

        .tip {
            margin: 5px 20px;
            height: 10px;
            font-size: 10px;
            color: #DF6687;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="top">
        <img id="userImg" src="./imgs/6.png" alt="" srcset="" class="left2">
        <div class="right">
            <div class="rightName" id="userId">ID:5446859</div>
            <div style="margin: 8px 0px;">
                <span id="s3" style="background-color: rgb(254, 237, 238); color: rgb(214, 96, 123);">28岁</span>
            </div>
            <div style="margin: 8px 0px;">
                <span id="s4">171CM</span>
            </div>
            <div style="margin: 8px 0px;">
                <span id="s5">四川 成都 成华区</span>
            </div>
            <div style="margin: 8px 0px;">
                <span id="s6">三星会员 报名费5000</span>
            </div>
            <div style="position: absolute; right: 10px; top: 50px; color: rgb(255, 255, 255); font-size: 16px;">
                <img id="s20" style="display: inline-block;width: 13px;">
                <p id="s8" style="display: inline-block;"></p>
            </div>
        </div>
    </div>


    <div class="box" @scroll="handleScroll">
        <div class="content">
            “Hello联系我”
        </div>
        <div class="title">
            会员资质：
        </div>
        <div class="c" id="hyzz">

        </div>

        <div class="title">
            <span><img id="s11" style="width: 16px; height: 16px;"/></span>
            <span id="s10">联系方式</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span onclick="tousu()" style="background-color: #1AA701; color: white;border-radius: 5px;">&nbsp;投诉&nbsp;</span>
        </div>

        <div id="lx"></div>

        <div class="c3" id="ck"></div>

        <div class="title">
            <span><img id="s13" style="width: 16px; height: 16px;"/></span>
            <span id="s14">详细资料</span>
        </div>

        <div id="xx"></div>
    </div>



    <div style="width: 100%;text-align: center; position: absolute;
        bottom: 5px;left: 50%;transform: translateX(-50%);"
         v-html="data['备案']"> </div>

</div>
</body>
<script>
    var id = 0;
    $(function() {
        id = getUrlParameters().id;
        if (id) {
            getDetail(id);
        }
    });

    function watchzz(s) {
        alert(s)
    }

    /**
     * 查看联系方式
     */
    function watch() {
        var sb = getDeviceId();
        // TODO: 修改查看联系方式接口
        var spsl = id;
        var url = "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id=9&sb="+sb+"&spsl=" + spsl;
        console.log(url)
        $.ajax({
            url: url, // 请求的URL
            type: "POST", // 请求类型，默认为GET
            dataType: "xml", // 预期服务器返回的数据类型
            success: function (response) { // 请求成功时的回调函数
                console.log(response)
                if (response.code = 1) {
                    alert(response.msg)
                } else {
                    alert("查看失败")
                }
            },
            error: function(xhr, status, error) { // 请求失败时的回调函数
                alert("查看失败")
                console.error(error); // 在控制台打印错误信息
            }
        });
    }

    /**
     * 投诉
     */
    function tousu() {
        var sb = getDeviceId();
        var url = "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id=10&sb="+sb+"&spsl=" + id;
        $.ajax({
            url: url, // 请求的URL
            type: "POST", // 请求类型，默认为GET
            dataType: "json", // 预期服务器返回的数据类型
            success: function (response) { // 请求成功时的回调函数
                // if (response.code == 1) {
                //     alert(response.msg);
                // }
                alert(response.msg);
            }
        });
    }

    function getDetail(id) {
        var sb = getDeviceId();

        var url = "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id=8&sb="+sb+"&spsl=" + id;
        $.ajax({
            url: url, // 请求的URL
            type: "POST", // 请求类型，默认为GET
            dataType: "json", // 预期服务器返回的数据类型
            success: function(response) { // 请求成功时的回调函数
                console.log(response);
                if (response.code == 1) {
                    $("#userId").text("ID:" + response.S0);
                    $("#userImg").attr("src", response.S2);
                    $("#s3").text(response.S3);
                    $("#s4").text(response.S4);
                    $("#s5").text(response.S5);
                    $("#s6").text(response.S6 + response.S7);
                    $("#s20").attr('src', response.S20);
                    $("#s8").text(response.S8);

                    // 联系方式
                    var lxStr = "";
                    for (var i = 0; i < response.LX.length; i++) {
                        lxStr += '<div class="c2"><span><img class="tb2" src="'+
                            response.LX[i].S1+'"></span><span class="content2">'+
                            response.LX[i].S2+response.LX[i].S3+
                            '</span><span style="float: right; text-align: right; color: black"><button onclick="watch()">'+
                            response.S19+'</button></span></div>';
                    }
                    $("#lx").append(lxStr);

                    $("#s11").attr('src', response.S11);
                    $("#s10").text(response.S10);

                    // 会员资质
                    var listStr = "";
                    $.each(response.tz, function(index, data){
                        listStr += "<span onclick='watchzz(\""+data.S2+"\")'><img class='tb' src='"+data.S1+"'></span>"
                    });
                    $("#hyzz").append(listStr);

                    // 查看
                    ckHtml = "";
                    ckHtml += response.CK[0].S1 + "<br>" +
                        response.CK[1].S1 + "<br>" +
                        response.CK[2].S1 + "<br>" +
                        response.CK[3].S1 + "<br>" +
                        response.CK[4].S1 + "<br>" +
                        response.CK[5].S1;
                    $("#ck").html(ckHtml);

                    $("#s13").attr('src', response.S13);
                    $("#s14").text(response.S14);

                    // 详细信息
                    var jhxcStr = "";
                    for (var i = 0; i < response.XX.length; i++) {
                        jhxcStr += "<div class='c4'>" + response.XX[i].S1 + response.XX[i].S2 + "</div>";
                    }
                    $("#xx").append(jhxcStr);
                }
            },
            error: function(xhr, status, error) { // 请求失败时的回调函数
                console.error(error); // 在控制台打印错误信息
            }
        });
    }
</script>
</html>
